<template>
  <div class="corporation-container">
    <!-- 1 阐述声明 -->
    <div v-if="show_expound" class="expound">
      <div class="expound-title">请验证您的企业信息, 否则无法正常使用</div>
      <div class="expound-content">
        <div class="expount-content-item item-1">验证企业需要准备一下材料,准备好后开始填写.</div>
        <div class="expount-content-item item-2">
          1、资质证明文件。
          <br />
          工商营业执照文件的电子照片或扫描。
          <br />
          企业工商营业执照，<span class="license">需加盖与主体一致的单位公章。</span>
        </div>
        <div class="expount-content-item item-3">
          2、其他证明材料。
          <br />
          如企业工商变更证明、官方红头文件、加盖公章证明等。
        </div>
      </div>
      <div class="expound-footer">
        <el-button class="fill-btn" v-if="accept_status == 1 || accept_status == 3" @click="show_expound = false">
          我知道了,现在去验证</el-button>
        <el-button class="fill-btn" v-else-if="accept_status == 2" @click="enterSystem">进入系统</el-button>
        <el-button class="plain-btn" @click="backLogin">退出</el-button>
      </div>
    </div>


    <!-- 2 详细填写内容 -->
    <el-form v-else ref="corpForm" :model="corpForm" :rules="rules" class="corpration-info" label-position="left">
      <!-- (1)企业资质 -->
      <div class="qualification">
        <el-row class="qualification-item" :gutter="20" type="flex" align="middle">
          <el-col :span="4">企业资质信息</el-col>
        </el-row>
        <el-row class="qualification-item" :gutter="20" type="flex" align="middle">
          <el-col :span="2">企业全称</el-col>
          <el-col :span="10">
            <el-form-item prop="companyName">
              <el-input ref="companyName" key="companyName" v-model="corpForm.companyName" placeholder="企业全称"
                name="companyName" type="text" tabindex="1" />
            </el-form-item>
          </el-col>
          <el-col :span="2">真实姓名</el-col>
          <el-col :span="10">
            <el-form-item prop="realName">
              <el-input ref="realName" key="realName" v-model="corpForm.realName" placeholder="真实姓名" name="realName"
                type="text" tabindex="2" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row class="qualification-item" :gutter="20" type="flex" align="middle">
          <el-col :span="10" :push="2">
            主体名称需严格按照证件填写,在注册确认后不可更改。
          </el-col>
          <el-col :span="2" :push="2">所属网点</el-col>
          <el-col :span="10" :push="2">
            <el-form-item>
              <addr-branch :select_level='1' :group_id="corpForm.groupId" @changenode="handleAddr" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row class="qualification-item" :gutter="20" type="flex" align="middle">
          <el-col :span="2">营业执照</el-col>
          <el-col :span="20">请上传最新的营业执照,<span class="license">证件需要与主体一致的单位公章、无公章的个体工商户可加盖法人私章或法人签字。</span></el-col>
        </el-row>

        <el-row class="qualification-item" :gutter="20" type="flex" align="middle">
          <el-col :span="20" :push="2">
            加盖公章的扫描件或者复印件，支持 .jpg.jpeg.bmp.gif.png 格式的照片，大小不超过10M。
          </el-col>
        </el-row>

        <el-row class="qualification-item" :gutter="20" type="flex" align="middle">
          <!-- 正本 -->
          <el-col :span="5" :push="2">
            <!-- 营业执照 -->
            <div class="upload-container">

              <el-upload action="/api/kd-server/picture/upload" :file-list="license_list" :show-file-list="false"
                name="img" :headers=" { 'enctype': 'multipart/form-data',method: 'post', token: token}"
                :data="{type: 'front'}" :before-upload="licenseBeforeUpload" :on-success="licenseSuccess"
                :on-exceed='licenseExceed'>
                <div v-show="!license_success" class="license-btn" slot="trigger">
                  <span class="iconfont icon-tianjia plus-sign"></span>
                  <span class="plus-title">营业执照正本</span>
                </div>
              </el-upload>

              <!-- <img class="el-upload-list__item-thumbnail" :src="byteToArray('C:\Users\cxw\Desktop\专用\ps\大老虎.jpg')" /> -->

              <div v-show="license_success" class="license-img">
                <el-image class="img" :src="license_list2[0]" :preview-src-list="license_list2" fit="cover"></el-image>
                <div class="img-badge" @click="handleDel(1)">x</div>
              </div>

            </div>
          </el-col>
          <!-- 副本 -->
          <el-col :span="5" :push="2">
            <!-- 营业执照 -->
            <div class="upload-container">

              <el-upload action="/api/kd-server/picture/upload" :file-list="license_back_list" :show-file-list="false"
                name="img" :headers=" { 'enctype': 'multipart/form-data',method: 'post', token: token}"
                :data="{type: 'back'}" :before-upload="licenseBeforeUpload" :on-success="licenseSuccess2"
                :on-exceed='licenseExceed2'>
                <div v-show="!license_back_success" class="license-btn" slot="trigger">
                  <span class="iconfont icon-tianjia plus-sign"></span>
                  <span class="plus-title">营业执照副本</span>
                </div>
              </el-upload>
              <div v-show="license_back_success" class="license-img">
                <el-image class="img" :src="license_back_list2[0]" :preview-src-list="license_back_list2" fit="cover">
                </el-image>
                <div class="img-badge" @click="handleDel(2)">x</div>
              </div>

            </div>
          </el-col>
          <!-- 回显展示 -->
          <el-col v-if="Echo" :span="5" :push="2">
            <span>上次提交 → </span>
          </el-col>
          <!-- 正本回显 -->
          <el-col v-if="Echo" :span="5" :push="1">
            <el-image 
              style="width: 130px; height: 178px"
              :src="JustEchoUrl" 
              :preview-src-list="JustEchoSrcList">
            </el-image>
          </el-col>
          <!-- 副本回显 -->
          <el-col v-if="Echo" :span="5" :push="1">
            <el-image 
              style="width: 130px; height: 178px"
              :src="BackEchoUrl" 
              :preview-src-list="BackEchoSrcList">
            </el-image>
          </el-col>
        </el-row>

        <el-row class="qualification-item" :gutter="20" type="flex" align="middle">
          <el-col :span="2">信用代码</el-col>
          <el-col :span="10">
            <el-form-item prop="unifiedSocialCreditCode">
              <el-input ref="unifiedSocialCreditCode" key="unifiedSocialCreditCode"
                v-model="corpForm.unifiedSocialCreditCode" placeholder="统一社会信用代码" name="unifiedSocialCreditCode"
                type="text" tabindex="2" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row class="qualification-item" :gutter="20" type="flex" align="middle">
          <el-col :span="10" :push="2">
            务必与营业执照上的注册号或统一社会信用代码一致。
          </el-col>
        </el-row>

        <el-row class="qualification-item" :gutter="20" type="flex" align="middle">
          <el-col :span="2">其他证明 材料 (选填)</el-col>
          <el-col :span="20">
            特殊情况可上传作为佐证,如企业工商变更证明、官方红头文件、加盖公章证明等。其他证明材料可上传最多10张
          </el-col>
        </el-row>

        <el-row class="qualification-item" :gutter="20" type="flex" align="middle">
          <el-col :span="20" :push="2">
            <!-- 其他材料 -->
            <div class="upload-container">
              <el-upload action="/api/kd-server/picture/upload" :file-list="doc_list" name="img"
                :headers=" { 'enctype': 'multipart/form-data',method: 'post', token: token}"
                :data="{type: 'credential'}" :before-upload="docBeforeUpload" :on-success="docSuccess"
                :limit="10" :show-file-list="false" :on-exceed='docExceed'>
                <div class="upload-btn">点击上传图片</div>
              </el-upload>
              <div class="upload-img">
                <el-image class="avatar" v-for="(itemurl,i) in doc_list2" :key="i" :src="itemurl"
                  :preview-src-list="doc_list2" fit="cover"></el-image>
              </div>
            </div>
          </el-col>
        </el-row>

        <el-row v-if="Echo" class="qualification-item" :gutter="20" type="flex" align="middle">
          <el-col :span="2">上次上传的材料展示</el-col>
          <el-image
            style="width: 100px; height: 100px"
            v-for="(item, i) in MSListurl"
            :key="i"
            :src="item" 
            :preview-src-list="MSListsrcList">
          </el-image>
        </el-row>

      </div>
      <!-- (2)分隔线 -->
      <div class="separator"></div>
      <!-- (3)法人信息 -->
      <div class="legal">
        <el-row class="legal-item" :gutter="20" type="flex" align="middle">
          <el-col :span="4">企业资质信息</el-col>
        </el-row>
        <el-row class="legal-item" :gutter="20" type="flex" align="middle">
          <el-col :span="2">法人姓名</el-col>
          <el-col :span="10">
            <el-form-item prop="legalName">
              <el-input ref="legalName" key="legalName" v-model="corpForm.legalName" placeholder="法人姓名" name="legalName"
                type="text" tabindex="3" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="legal-item" :gutter="20" type="flex" align="middle">
          <el-col :span="2">身份证号</el-col>
          <el-col :span="10">
            <el-form-item prop="legalIdCode">
              <el-input ref="legalIdCode" key="legalIdCode" v-model="corpForm.legalIdCode" placeholder="法人身份证号码"
                name="legalIdCode" type="text" tabindex="4" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="legal-item" :gutter="20" type="flex" align="middle">
          <el-col :span="2">法人电话</el-col>
          <el-col :span="10">
            <el-form-item prop="legalTel">
              <el-input ref="legalTel" key="legalTel" v-model="corpForm.legalTel" placeholder="法人电话" name="legalTel"
                type="text" tabindex="5" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="legal-item" :gutter="20" type="flex" align="middle">
          <el-col :span="2">验证码</el-col>
          <el-col :span="10">
            <el-form-item prop="verify">
              <el-input key="verify" ref="verify" v-model="corpForm.verify" type="text" placeholder="短信验证码"
                name="verify" tabindex="6">
                <div class="verify-mess" :class="verify_css(verify_disable)" slot="append" @click="getVerifyMsg()">
                  {{ verify_btn }}
                </div>
              </el-input>
            </el-form-item>

          </el-col>
        </el-row>
      </div>
      <!-- (4)底部按钮 -->
      <div class="corporation-footer">
        <el-button class="fill-btn" @click="commitInfo">提交</el-button>
        <el-button class="plain-btn" @click="backLogin">取消</el-button>
      </div>
    </el-form>
  </div>

</template>

<script>
  import {
    validMobile,
    validFixed,
    validSocialCredit,
    validIdCard
  } from '@/utils/validate'
  
  import {
    checkApprove,
    checkUserinfo
  } from '@/api/permission'

  import {
    delImgCorporation
  } from '@/api/login'

  import AddrBranch from '@/components/Address/AddrBranchSelectRegister.vue'

  export default {
    name: 'Corporation',
    components: {
      AddrBranch
    },
    data() {
      const validateCorpphone = (rule, value, callback) => {
        if (!validMobile(value) && !validFixed(value)) {
          callback(new Error('电话号格式不正确!  例:151xxxxxxxx, 0779-xxxxxxxx'))
        } else {
          callback()
        }
      }
      const validatePhone = (rule, value, callback) => {
        if (!validMobile(value)) {
          callback(new Error('手机号格式不正确!'))
        } else {
          callback()
        }
      }
      const validateUscc = (rule, value, callback) => {
        if (!validSocialCredit(value)) {
          callback(new Error('统一社会信用码格式不正确!'))
        } else {
          callback()
        }
      }
      const validateName = (rule, value, callback) => {
        if (value.length < 1) {
          callback(new Error('不能为空!'))
        } else {
          callback()
        }
      }
      const validateVerify = (rule, value, callback) => {
        if (value && value.length != 6) {
          callback(new Error('验证码为6位!'))
        } else {
          callback()
        }
      }
      const validateIdcard = (rule, value, callback) => {
        if (!validIdCard(value)) {
          callback(new Error('身份证格式不正确!'))
        } else {
          callback()
        }
      }

      const that = this
      return {
        show_expound: true, // 是否显示声明页

        list_group: [{
          id: 11,
          label: '邮政'
        }, {
          id: 12,
          label: '圆通'
        }, {
          id: 13,
          label: '申通'
        }, {
          id: 14,
          label: '中通'
        }, {
          id: 15,
          label: '韵达'
        }, {
          id: 16,
          label: '顺丰'
        }],
        corpForm: {
          companyName: '', // 公司全称
          groupId: '', // 所属公司id
          realName: '', // 真实姓名
          deptId: '', // 所属网点
          unifiedSocialCreditCode: '', // 统一信用代码
          legalName: '', // 法人姓名
          legalIdCode: '', // 法人身份证号
          legalTel: '', // 法人电话
          verify: '',
          accpetStatus: 1, // 审批状态
          uploadStatus: 1, // 是否上传资料
        },
        rules: {
          companyName: [{
            required: true,
            trigger: 'blur',
            validator: validateName
          }],
          unifiedSocialCreditCode: [{
            required: true,
            trigger: 'blur',
            validator: validateUscc
          }],
          legalTel: [{
            required: true,
            trigger: 'blur',
            validator: validatePhone
          }],
          legalName: [{
            required: true,
            trigger: 'blur',
            validator: validateName
          }],
          legalIdCode: [{
            required: true,
            trigger: 'blur',
            validator: validateIdcard
          }],
          verify: [{
            required: true,
            trigger: 'blur',
            validator: validateVerify
          }],
          realName: [{
            required: true,
            trigger: 'blur',
            message: '不能为空'
          }]
        },
        verify_disable: '',
        verify_btn: '获取验证码',

        license_success: false, // 营业执照是否上传成功(正本)
        license_list: [], // 营业执照列表(正本)
        license_list2: [], // 营业执照列表(正本)--回显
        pictureid_front: '',

        license_back_success: false, // 营业执照是否上传成功(副本)
        license_back_list: [], // 营业执照列表(副本)
        license_back_list2: [], // 营业执照列表(副本)--回显
        pictureid_back: '',

        doc_success: false, // 证明材料是否上传成功
        doc_list: [], // 其他资料列表
        doc_list2: [], // 其他资料列表--回显
        down_time: 60, // 倒计时
        mark: '', // 用户的标识 56a2-1622119438192-5336
        corporation_loading: false,

        token: '',
        accept_status: '',
        // 正本回显
        JustEchoUrl: '',
        JustEchoSrcList: [],
        // 副本回显
        BackEchoUrl: '',
        BackEchoSrcList: [],
        // 正本数组
        JustArr: [],
        // 副本数组
        BackArr: [],
        // 正本数组回显
        JustEchoArr: [],
        // 副本数组回显
        BackEchoArr: [],
        // 材料图片的回显
        MSListurl: [],
        MSListsrcList: [],
        MSListArr: [],
        // 材料原id数组
        MSListEchoArr: [],
        // 计数
        count: 0,
        // 有无回显
        Echo: true
      }
    },
    computed: {
      param_data() {
        if (this.corpForm.password && this.corpForm.phone) {
          const cryptograph = this.$sha256(this.corpForm.password + this.corpForm.phone)
          return {
            'phone': this.corpForm.phone,
            'password': cryptograph
          }
        } else {
          return {}
        }
      },
      verify_css() {
        return (dis) => {
          if (!dis) {
            return 'verifyactive'
          } else {
            return 'verifydefault'
          }
        }
      },
    },
    watch: {},
    created() {
      // window.addEventListener('storage', this.afterQRScan)
      // this.mark = this.$route.query.my_mark
      // this.corpForm.phone = window.localStorage.getItem('phone' + this.mark)
      // this.corpForm.password = window.localStorage.getItem('password' + this.mark)

      this.token = this.$store.getters.token
      this.accept_status = this.$store.getters.accept_status
      this.messageEcho()
    },
    mounted() {
      // if (this.corpForm.userphone === '') {
      //   this.$refs.userphone.focus()
      // } else if (this.corpForm.password === '') {
      //   this.$refs.password.focus()
      // }
      // console.log(this.$store.getters.accept_status);
    },
    destroyed() {
      // window.removeEventListener('storage', this.afterQRScan)
    },
    methods: {
      // 信息回显
      messageEcho() {
        checkUserinfo({}).then((res) => {
          console.log('成功的回显 :>> ', res);
          this.corpForm.companyName = res.data.companyName ? res.data.companyName : ''
          this.corpForm.realName = res.data.realName ? res.data.realName : ''
          this.corpForm.unifiedSocialCreditCode = res.data.unifiedSocialCreditCode ? res.data.unifiedSocialCreditCode : ''
          this.corpForm.legalName = res.data.legalName ? res.data.legalName : ''
          this.corpForm.legalIdCode = res.data.legalIdCode ? res.data.legalIdCode : ''
          this.corpForm.legalTel = res.data.legalTel ? res.data.legalTel : ''

          if (res.data.pictures.length == 0) {
            this.Echo = false
          } else {
            // 拿回显图片id数组
            res.data.pictures.forEach(xx => {
              if (xx.type == 'front') {
                this.JustEchoArr.push(xx.id)
                this.JustEchoUrl = "http://" + xx.pictureUrl
                this.JustEchoSrcList.push("http://" + xx.pictureUrl)
              } else if (xx.type == 'back') {
                this.BackEchoArr.push(xx.id)
                this.BackEchoUrl = "http://" + xx.pictureUrl
                this.BackEchoSrcList.push("http://" + xx.pictureUrl)
              } else if (xx.type == 'credential') {
                this.MSListArr.push(xx.id)
                console.log('拿到回显图片拿到id了吗 :>> ', this.MSListArr)
                this.MSListurl.push("http://" + xx.pictureUrl)
                this.MSListsrcList.push("http://" + xx.pictureUrl)
              }
            })
          }

        })
      },
      // 进入系统
      enterSystem() {
        this.$router.replace({
          path: '/video/videomonitor',
        })
      },
      // 返回登录页
      backLogin() {
        
        // console.log('正本数组 :>> ', String(this.JustArr))
        // console.log('副本数组 :>> ', String(this.BackArr))
        // console.log('材料数组 :>> ', String(this.MSListEchoArr))

        // console.log('参数 :>> ', String(this.JustArr.concat(this.BackArr).concat(this.MSListEchoArr)));

        // console.log('正本 :>> ', (this.license_success))
        // console.log('副本 :>> ', (this.license_back_success))
        // console.log('材料 :>> ', (this.MSListEchoArr.length > 0))

        if (this.Echo) {
          if ((this.license_success) || (this.license_back_success) || (this.MSListEchoArr.length > 0)) {
            delImgCorporation({ pictureId: String(this.JustArr.concat(this.BackArr).concat(this.MSListEchoArr)) })
          }
        }


        this.show_expound = true
        this.$router.replace({
          path: '/login'
        })
      },
      // 选择网点
      handleAddr(code, level, newval) {
        this.corpForm.deptId = code
      },

      // 营业执照删除图片
      handleDel(num) {
        this.$confirm('此操作将删除该图片, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          if (num == 1) {
            // 删除图片的网络请求
            delImgCorporation({
              pictureId: this.pictureid_front
            }).then(res => {
              if (res.code == 0) {
                this.$message({
                  message: '删除成功',
                  type: 'success'
                })
                this.license_list = []
                this.license_list2.pop()
                this.license_success = false
                this.pictureid_front = ''
              } else {
                this.$message({
                  message: '删除失败',
                  type: 'error'
                })
              }
            }).catch(() => {
              this.$message({
                message: '删除失败',
                type: 'error'
              })
            })
          } else if (num == 2) {
            // 删除图片的网络请求
            delImgCorporation({
              pictureId: this.pictureid_back
            }).then(res => {
              if (res.code == 0) {
                this.$message({
                  message: '删除成功',
                  type: 'success'
                })
                this.license_back_list = []
                this.license_back_list2.pop()
                this.license_back_success = false
                this.pictureid_back = ''
              } else {
                this.$message({
                  message: '删除失败',
                  type: 'error'
                })
              }
            }).catch(() => {
              this.$message({
                message: '删除失败',
                type: 'error'
              })
            })
          }



        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },

      // 上传营业执照: 前置钩子
      licenseBeforeUpload(file) {
        const isJPG = (file.type === 'image/jpeg' || file.type === 'image/png')
        const isLt10M = file.size / 1024 / 1024 < 10

        if (!isJPG) {
          this.$message.error('营业执照图片只能是 JPG/JPEG/PNG!')
        }
        if (!isLt10M) {
          this.$message.error('营业执照图片大小不能超过 10MB!')
        }
        return isJPG && isLt10M
      },
      // 营业执照上传成功(正本)
      licenseSuccess(res, file, filelist) {
        
        // 存放删除用的数组
        this.JustArr.push(filelist[0].response.data.pictureId);

        this.license_list2 = filelist.map((item, i) => {
          return URL.createObjectURL(item.raw) //  转成url ###
        })

        if (res.code == 0) {
          this.pictureid_front = res.data.pictureId
          this.license_success = true
        } else {
          this.$message({
            message: '上传失败',
            type: 'error',
          })
        }
        // console.log(this.license_list2);
      },
      // 营业执照上传成功(副本)
      licenseSuccess2(res, file, filelist) {

        // 存放删除副本数组
        this.BackArr.push(filelist[0].response.data.pictureId);

        this.license_back_list2 = filelist.map((item, i) => {
          return URL.createObjectURL(item.raw) //  转成url ###
        })
        if (res.code == 0) {
          this.pictureid_back = res.data.pictureId
          this.license_back_success = true
        } else {
          this.$message({
            message: '上传失败',
            type: 'error',
          })
        }
      },

      // 上传营业执照超出上限(正本)
      licenseExceed(files, fileList) {
        this.$message.warning(`当前限制 1 个文件，本次选择 ${files.length} 个文件，共选择 ${files.length + fileList.length} 个文件`)
      },

      // 上传营业执照超出上限(副本)
      licenseExceed2(files, fileList) {
        this.$message.warning(`当前限制 1 个文件，本次选择 ${files.length} 个文件，共选择 ${files.length + fileList.length} 个文件`)
      },

      // 上传其他材料: 前置钩子
      docBeforeUpload(file) {
        const isJPG = (file.type === 'image/jpeg' || file.type === 'image/png')
        const isLt10M = file.size / 1024 / 1024 < 10

        if (!isJPG) {
          this.$message.error('其他材料图片只能是 JPG/JPEG/PNG!')
        }
        if (!isLt10M) {
          this.$message.error('其他材料图片大小不能超过 10MB!')
        }
        return isJPG && isLt10M
      },
      // 其他材料上传成功
      docSuccess(res, file, filelist) {

        this.MSListEchoArr.push(filelist[this.count].response.data.pictureId)
        this.count++

        this.doc_list2 = filelist.map((item, i) => {
          return URL.createObjectURL(item.raw) //  转成url ###
        })
        if (res.code == 0) {
          this.doc_success = true
        }
      },
      // 上传其他材料超出上限
      docExceed(files, fileList) {
        this.$message.warning(`当前限制 10 个文件，本次选择 ${files.length} 个文件，共选择 ${files.length + fileList.length} 个文件`)
      },


      // 获取验证码 和 倒计时
      getVerifyMsg() {
        let interval
        if (!validMobile(this.corpForm.legalTel)) {
          this.$message({
            message: '号码格式不正确',
            type: 'error',
            duration: 4000,
          })
          this.verify_btn = '获取验证码'
          this.verify_disable = false
          this.down_time = 60
          window.clearInterval(interval)
          // callback(new Error('格式不正确!'))
        } else {
          const that = this

          interval = window.setInterval(() => {
            that.verify_btn = '重新获取(' + that.down_time + '秒)'
              --that.down_time
            if (that.down_time < 0) {
              that.verify_btn = '获取验证码'
              this.verify_disable = false
              that.down_time = 60
              window.clearInterval(interval)
            }
          }, 1000)

          // 网络请求: 获取手机验证码

        }

      },

      // 提交企业信息=======================================================================================
      commitInfo() {
        this.$refs.corpForm.validate(valid => {
          if (valid) {
            if ((!this.license_success) || (!this.license_back_success)) {
              this.$message({
                message: '请上传营业执照!',
                type: 'error',
                duration: 4000,
                showClose: true,
                center: true
              })
            } else if (this.corpForm.deptId == '') {
              this.$message({
                message: '请选择所属网点!',
                type: 'error',
                duration: 4000,
                showClose: true,
                center: true
              })
            } else {
              this.reg_loading = true

              if (this.Echo) {
                if (this.MSListArr.length > 0) {
                // 删除回显里面的图片
                  delImgCorporation({ pictureId: String(this.JustEchoArr.concat(this.BackEchoArr).concat(this.MSListArr)) })
                } else {
                  delImgCorporation({ pictureId: String(this.JustEchoArr.concat(this.BackEchoArr)) })
                }
              }

              // 发送提交企业信息的 网络请求,
              checkApprove(this.corpForm).then(res => {
                if (res.code == 0) {
                  this.$message({
                    message: '提交成功!',
                    type: 'success',
                    duration: 4000,
                    showClose: true,
                    center: true
                  })
                  // 成功之后
                  this.reg_loading = false
                  this.$router.replace('/login')
                } else {
                  this.$message({
                    message: '提交失败!',
                    type: 'error',
                    duration: 4000,
                    showClose: true,
                    center: true
                  })
                }
              }).catch(() => {
                this.reg_loading = false
              })
            }
          } else {
            return false
          }
        })
        
      }
    }
  }
</script>

<style lang="scss">
  @import "~@/styles/variables.scss";

  // 输入框外边距: 低
  .corporation-container {
    .el-form {
      .el-form-item {
        margin-bottom: 0 !important;
      }
    }
  }


  .plain-btn {
    color: var(--app_primary);

    &.el-button--medium {
      font-size: 12px;
      padding: 0 10px;
      border-radius: 3px !important;
    }

    &.el-button {
      height: 27px;
      border: 1px solid $my_primary !important;
    }
  }

  .fill-btn {
    color: #fff;

    &.el-button--medium {
      font-size: 12px;
      padding: 0 10px;
      border-radius: 3px !important;
    }

    &.el-button {
      height: 27px;
      color: #fff;
      background-color: var(--app_primary);
    }
  }
</style>

<style lang="scss" scoped>
  @import "~@/styles/variables.scss";

  // $bg:rgba(0,0,0,0);
  // $text_dark: #5E5E5E;

  // $my_white: #fff;
  // $dark_text: #5E5E5E;
  // $light_text: #B3B3B3;
  // $my_primary_color: rgba(15, 139, 253, 1);
  // $my_primary_color_light: rgba(15, 139, 253, 0.5);
  // $text_color: #fff;

  // $border_middle: #D4D4D4;
  // $border_light: #D9DADA;
  // $my_primary: #00805a;
  // $my_primary_bg: #2b303b;
  // $text_light: #9fa1a2;
  // $text_middle: #c0c0c0;
  // $obj_white: #ffffff;
  // $my_danger: #ff4c4c;

  .corporation-container {
    width: 100%;
    height: 100%;
    min-width: 1300px;
    min-height: 680px;
    overglow: hidden;
    background-color: #878787;
    opacity: 0.75;
    display: flex;
    align-items: center;
    justify-content: center;

    // 1企业信息 提示页
    .expound {
      width: 960px;
      height: 520px;
      background: $my_white;
      border-radius: 2px;
      position: relative;
      padding: 25px 50px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      font-size: 14px;

      .expound-title {
        font-size: 25px;
      }

      .expound-content {

        .item-1,
        .item-2 {
          margin-bottom: 25px;
        }

        .item-2 {
          .license {
            color: $my_danger;
          }
        }
      }

      .expound-footer {}
    }

    // 2企业信息详情
    .corpration-info {
      width: 1200px;
      height: 620px;
      background-color: $my_white;
      border-radius: 3px;
      position: relative;
      padding: 33px;
      overflow: scroll;
      font-size: 14px;

      .qualification {

        // background-color: #eef;
        .qualification-item {
          margin-bottom: 20px;

          .upload-container {
            // 营业执照图片 上传区域
            // height: 100px;
            display: flex;

            .license-btn {
              border-radius: 3px;
              // background-color: #f99;
              border: 1px dashed $text_middle;
              color: $text_middle;
              width: 130px;
              height: 178px;
              display: flex;
              flex-direction: column;
              justify-content: center;

              .plus-sign {
                font-size: 40px;
                // color: $border_light;
                height: 45px;
                line-height: 45px;
              }

              .plus-title {
                // color: $border_light;
                height: 25px;
                line-height: 25px;
              }
            }

            .license-btn:hover {
              color: var(--app_primary);
              border: 1px dashed var(--app_primary);
            }

            .license-img {
              position: relative;
              width: 130px;
              height: 178px;

              .img {
                width: 100%;
                height: 100%;
              }

              .img-badge {
                color: $my_white;
                background-color: $my_danger;
                position: absolute;
                top: -5px;
                right: -5px;
                width: 16px;
                height: 16px;
                // display: inline-block;
                // justify-content: center;
                // align-items: center;
                // flex-wrap: nowrap;
                // line-height: 14px;
                line-height: 1;
                text-align: center;
                font-size: 10px;
                cursor: pointer;
                border-radius: 50%;
                border: 1px solid $my_white;

                &:hover {
                  border-color: $text_middle;
                }
              }

            }

            .upload-btn {
              width: 100px;
              height: 30px;
              line-height: 30px;
              text-align: center;
              border: 1px solid $border_middle;
              border-radius: 3px;
              font-size: 12px;
              cursor: pointer;
              margin-right: 20px;
            }

            .upload-img {
              // background-color: #ffe;
              flex: 1;

              .avatar {
                width: 100px;
                height: 100px;
                margin-right: 10px;
              }
            }
          }

          .license {
            color: $my_danger;
          }
        }
      }

      .separator {
        height: 1px;
        background-color: $border_middle;
        margin: 20px 0;
      }

      .legal {
        .legal-item {
          margin-bottom: 20px;

          .verify-mess {
            cursor: pointer;
            font-size: 12px;
          }
        }
      }

      .corporation-footer {
        width: 100%;
        display: flex;
        justify-content: center;
      }
    }


  }

  @supports (-webkit-mask: none) and (not (cater-color: $text_dark)) {
    .login-container .el-input input {
      color: $text_dark;
    }
  }

  @media only screen and (max-width: 470px) {
    .thirdparty-button {
      display: none;
    }
  }
</style>
